<template>
  <div class="BackEnd">
    <h2>文件的导入导出</h2>
    <div class="operating">
      <Button type="primary" class="import" @click="openImportPopUps"
        >导入</Button
      >
      <Button type="primary" class="export" @click="table2excel">导出</Button>
    </div>
    <Table :columns="columns" :data="data"></Table>
    <Modal
      v-model="popUps.import.model"
      :title="popUps.import.title"
      :loading="popUps.import.loading"
      @on-ok="importPopUpsConfirm"
    >
      <a
        class="downloadTemplate"
        href="https://192.168.1.12/template/student_register_template.zip"
        download="student_register_template.zip"
        >下载模板</a
      >
      <label for="import">ZIP导入</label>
      <input
        type="file"
        id="import"
        @change="handleImport"
        accept="aplication/zip"
      />
    </Modal>
  </div>
</template>
<script>
import table2excel from "js-table2excel";
export default {
  name: "BackEnd",
  data() {
    return {
      // 弹窗数据
      popUps: {
        import: {
          model: false,
          loading: true,
          title: "导入数据",
        },
      },
      // 表格数据格式 列
      columns: [
        {
          title: "人员类型",
          key: "people_type",
        },
        {
          title: "姓名",
          key: "username",
        },
        {
          title: "性别",
          render: (h, params) => {
            return h("p", Number(params.row.gender) ? "女" : "男");
          },
        },
        {
          title: "学籍号",
          key: "id_card",
        },
        {
          title: "年龄",
          key: "age",
        },
        {
          title: "照片",
          type: "image",
          key: "image_base64",
          render: (h, params) => {
            return h("div", [
              h("img", {
                class: "tableRegistrationPhoto",
                attrs: {
                  src: params.row.image_base64,
                },
              }),
            ]);
          },
        },
      ],
      // 表格数据
      data: [],
    };
  },
  mounted() {
    this.postPeopleData();
  },
  methods: {
    // 打开导入弹窗
    openImportPopUps() {
      this.popUps.import.model = true;
    },
    // 导入弹窗 - 确定
    importPopUpsConfirm() {
      this.popUps.import.model = false;
    },
    // 导入
    handleImport(e) {
      let file = e.target.files;
      let reader = new FileReader();
      if (file.length > 0) {
        reader.readAsDataURL(file[0]);
        //onload是FileReader对象里的方法，表示图片上传完成且没有错误就会触发onload事件
        reader.onload = () => {
          this.postZipData(file[0]);
        };
      }
    },
    // 上传zip
    postZipData(file) {
      this.$store
        .dispatch("backEnd/PostZipData", {
          zip: file,
        })
        .then((res) => {
          if (res.statusCode === 200) {
            this.$Message.success("导入成功");
          } else if (res.statusCode === 401) {
            this.$router.push("/");
          } else if (res.statusCode === 403) {
            this.$message("您没有权限导入");
          } else if (res.statusCode === 902) {
            this.$Message.error("因未在图片中识别人脸添加失败");
          } else {
            this.$Message.error("导入失败,请重新导入");
          }
        });
    },
    // 导出
    table2excel() {
      table2excel(this.columns, this.data, "导出文件名");
    },
    // 获取表格数据
    postPeopleData() {
      this.$store.dispatch("home/PostPeopleData", {}).then((res) => {
        if (res.statusCode === 200) {
          res.data.forEach((item, index) => {
            if (item?.imageUrls[0]?.imageUrl) {
              item.image_base64 =
                "https://192.168.1.12/" + item.imageUrls[0].imageUrl;
            }
          });
          this.data = res.data;
        }
      });
    },
  },
};
</script>
<style lang="scss">
.ivu-modal-body {
  display: flex;
  align-items: center;
  .downloadTemplate {
    margin-right: 40px;
  }
  #import {
    display: none;
  }
}
.BackEnd {
  .ivu-table-wrapper {
    .tableRegistrationPhoto {
      width: 50px;
      vertical-align: middle;
    }
  }
}
</style>
<style lang="scss" scoped>
.BackEnd {
  width: 1200px;
  margin: auto;
  h2 {
    text-align: center;
    font-size: 20px;
    height: 50px;
    line-height: 50px;
  }
  .operating {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .import {
      margin-right: 10px;
    }
  }
}
</style>